<template>
	<view class="box" :style="theme">
		<u-sticky bgColor="#fff" style="top: 0;">
			<u-tabs :list="tab" lineHeight="1" :scrollable="false"
				:activeStyle="{fontWeight: 'bolder',fontSize: '28rpx',color: '#222222'}"
				:inactiveStyle="{fontSize: '28rpx'}" @click="tabclick" :current="swiperIndex"></u-tabs>
		</u-sticky>
		<view class="box_piao">
			<view class="box_piao_item" v-for="(item, index) in list" :key="index"
				@click="jump2('/pages/home/receiveCoupons?type=2&id=',item.couponsId)">
				<view class="box_piao_item_left" :class="swiperIndex != 0 ? 'activebg' : ''">
					<view>{{ item.couponsType == 0 ? '折扣券' : '代金券'}}</view>
					<view v-if="item.couponsType == '1'">{{ item.discountNum }}元</text></view>
					<view v-else>{{ item.discountNum }}折</text></view>
					<view class="box_piao_item_left_a"></view>
					<view class="box_piao_item_left_b"></view>
				</view>
				<view class="box_piao_item_right" :class="swiperIndex == 2 ? 'activebgs' : ''">
					<view class="bt">{{ item.couponsName }}</view>
					<view v-if="item.couponsType == 0" class="js limit-2-line">订单满{{item.miniNum}}享{{item.discountNum}}折</view>
					<view v-else class="js limit-2-line">订单满{{item.miniNum}}减{{item.discountNum}}元</view>
					<view class="box_piao_item_right_lq">
						<view v-if="item.validityEndTime" class="box_piao_item_right_lq_font">
							有效期至：{{ item.validityEndTime.slice(0, 10) }}</view>
						<view class="box_piao_item_right_lq_box">
							<view class="lq_text"></view>
							<view class="lq_lq">
								<text v-if="swiperIndex != 0">{{swiperIndex == 0?'去使用':swiperIndex == 1?'已使用':'已过期'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="end && list.length >= rows" :status="status" line />
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无优惠券～</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				noClick: true,
				tab: [{
					name: "未使用",
					triggered: false,
				}, {
					name: "已使用",
					triggered: false,
				}, {
					name: "已过期",
					triggered: false,
				}],
				swiperIndex: 0,
				status: 'nomore',
				page: 1,
				rows: 10,
				end: false,
				firstQueryTime: ''
			}
		},
		onShow() {
			this.reset()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			reset() {
				this.list = [];
				this.page = 1;
				this.firstQueryTime = this.$app.firstQueryTime()
				this.end = false;
				this.getList()
			},
			tabclick(e) {
				this.swiperIndex = e.index;
				this.reset()
			},
			getList() {
				this.$app.ajax({
					api: this.$api.myCoupon(),
					data: {
						userId: this.userInfo.id,
						pagination: {
							page: this.page,
							firstQueryTime: this.firstQueryTime,
							rows: this.rows
						},
						param: {
							stadiumId: this.venueId,
							isMult: '1',
							useStatus: this.swiperIndex
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < this.rows) {
							this.end = true
						}
						if (res.recordList) {
							this.list = [...this.list, ...res.recordList]
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},

		},
		onReachBottom(e) {
			this.reachBottom()
		}

	}
</script>
<style scoped lang="scss">
	.box_piao {
		padding: 24rpx 30rpx;
		box-sizing: border-box;

		.box_piao_item {
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #ffffff;
			border-radius: 15rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

			.box_piao_item_left {
				width: 180rpx;
				height: 180rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				flex-shrink: 0;
				position: relative;
				background: $phb;
				box-shadow: inset 0px 2rpx 4rpx 0px rgba(255, 255, 255, 0.47);

				view {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.9);

					&:nth-of-type(2) {
						font-size: 44rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin: 5rpx 0;

						text {
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
						}
					}

					&.box_piao_item_left_a {
						position: absolute;
						right: -15rpx;
						top: -15rpx;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background: $bjColor;
					}

					&.box_piao_item_left_b {
						position: absolute;
						right: -15rpx;
						bottom: -15rpx;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background: $bjColor;
					}
				}
			}

			.box_piao_item_right {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				flex-shrink: 0;
				box-sizing: border-box;

				&.activebg {
					background: #DDDDDD !important;

					text {
						color: #888888 !important;
					}
				}

				&.activebgs {
					text {
						color: #888888 !important;

						&.on {
							color: $color;
						}
					}
				}

				.bt {
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
					width: 400rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.sm {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					margin: 10rpx 0;
					width: 400rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.box_piao_item_right_lq {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.box_piao_item_right_lq_font {
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 70%;
					}

					.lq_lq {
						display: flex;
						align-items: center;

						text {
							width: 80rpx !important;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 26rpx;
							font-weight: 400;
							margin-right: 8rpx;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
	}
</style>